<style scoped lang="less">
.songList {
  max-width: 800px;
  margin: 30px auto 0;
  &__title{
    font-size: 14px;
    color: #141B27;
    cursor: pointer;
    transition: color ease-in-out 300ms;
    &:hover{ color: red }
  }
  &__list{
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 14px;
    box-sizing: border-box;

    &__item{
      box-sizing: content-box;
      position: relative;
      &__image{
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        width: 100%;
        background: grey;
        transition: all ease-in-out 300ms;
        &__image{
          width: 100%;
          object-fit: contain;
          display: block;
        }
        &:hover{
          box-shadow: 2px 2px 16px 5px rgba(0, 0, 0, 0.23);
          //.songList__list__item__tag{
          //  bottom: 0;
          //}
          .songList__list__item__play-button{
            transform: scale(2);
          }
        }
      }

      &__title{
        margin-top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }

      &__play-count{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        color: white;
        background: rgba(20, 27, 39, 0.18);
        padding: 4px 8px;
        border-radius: 0 12px 0 12px;
      }
      &__tag{
        transition: all ease-in-out .3s;
        position: absolute;
        bottom: 0;
        left: 0;
        height: 20px;
        width: 100%;
        background: rgba(134, 130, 130, 0.59);
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        color: #ffffff;
      }
      &__play-button{
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform: scale(0);
        transition: all ease-in-out .3s;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(80, 80, 80, 0.32);
        &:active{
          .songList__list__item__play-button__icon{
            opacity: .6;
          }
        }
        &__icon{
          padding: 12px;
          width: 30px;
          display: block;
          transform: scale(0.5);
        }
      }
    }
  }
}
</style>
<template>
  <div class="songList">
    <div class="songList__title" @click="netEasyMusicStore.pushRouter('playlist')" >推荐歌单 ></div>
    <div class="songList__list">
      <div class="songList__list__item" v-for="(ele,index) of listCom" :key="index">
        <div class="songList__list__item__image">
          <img :src="ele.imageUrl" class="songList__list__item__image__image"/>
          <div class="songList__list__item__play-count">{{ ele.playCount }}</div>
<!--          <div class="songList__list__item__tag">{{ ele.labelTexts }}</div>-->
          <div class="songList__list__item__play-button" @click="playMusic(ele)" >
            <img :src="playIcon" class="songList__list__item__play-button__icon">
          </div>
        </div>
        <div class="songList__list__item__title">{{ ele.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import playIcon from '../../../icon/play-red.png'
import netEasyMusicStore from '../../../store'
import {computed, ref} from "vue";
import {formatNumber} from "@/helper";
import {AxiosService} from "@/core";
const axios = new AxiosService('netEasyMusic')

// 数据
const list = ref([])
const listCom = computed(() => (list.value?.map( (ele:any) => ({
  ...ele,
  imageUrl: ele?.picUrl,
  labelTexts: ele?.uiElement?.labelTexts.join('、'),
  title:ele?.name,
  playCount: formatNumber(ele?.playCount)
}))))

// 请求
axios.get({
  api:'/personalized',
  params:{limit:12},
  success: ({result}) => list.value = result
})

const playMusic = (event:any) => {
  const { id } = event
  netEasyMusicStore.setPlayListById(id,true)
}
</script>

